<template>
  <view class="home-container">
    <!-- 轮播图 -->
    <swiper circular indicator-dots indicator-active-color="#fff" autoplay>
      <block v-for="item in swiperList" :key="item.bannerid">
        <swiper-item>
          <image :src="item.img" />
        </swiper-item>
      </block>
    </swiper>
    <!-- 菜单列表 -->
    <uni-grid :column="5" :highlight="true" :showBorder="false">
      <uni-grid-item
        v-for="(item, index) in menuList"
        :key="item.id"
        :index="index"
        style="background-color: #fff"
      >
        <view class="grid-item-box">
          <image :src="item.icon"></image>
          <text class="text">{{ item.title }}</text>
        </view>
      </uni-grid-item>
    </uni-grid>
    <!-- 商品列表 -->
    <view class="goods-list">
      <view
        class="goods-item"
        v-for="item in goodsList"
        :key="item.proid"
        @click="toDedail(item.proid)"
      >
        <image :src="item.img1" />
        <text class="title">{{ item.proname }}</text>
        <text class="desc">{{ item.desc }}</text>
        <text class="price">￥{{ formatPrice(item.originprice) }}</text>
      </view>
    </view>
    <view class="footer">
      <text v-if="isMore">没有更多数据了</text>
      <van-loading type="spinner" size="24px" v-else>加载中...</van-loading>
    </view>
  </view>
</template>

<script setup lang="ts">
import { getSwipers, Menus, getGoods } from '@/api/home'
import type { Swipers, Menu, Goods } from '../../types/home'
import { onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import { formatPrice } from '../../filter/index'
import { ref } from 'vue'
import { useTarBarBadge,useTabBarTitle } from '@/hooks'

useTarBarBadge()
useTabBarTitle()
const swiperList = ref<Swipers[]>([])
const menuList = ref<Menu[]>([])
const goodsList = ref<Goods[]>([])
const page = ref(1)
const isMore = ref(false)
//轮播图
const getSwiperData = async () => {
  const res = await getSwipers()
  swiperList.value = res.data
}
//菜单列表
const getMenuData = async () => {
  const res = await Menus()
  menuList.value = res.data
}
//商品列表
const getGoodsData = async () => {
  const res = await getGoods(page.value)
  goodsList.value = [...goodsList.value, ...res.data]
  //停止下拉刷新效果
  uni.stopPullDownRefresh()
  //上拉加载更多  判断数据是否为空
  if (res.data.length === 0) {
    isMore.value = true
  }
}
onReachBottom(() => {
  if (isMore.value) return
  page.value++
  getGoodsData()
})
onPullDownRefresh(() => {
  page.value = 1
  goodsList.value = []
  isMore.value = false
  getGoodsData()
})
const toDedail = (val: string) => {
  uni.navigateTo({
    url: `/subcontract/detail/index?proid=${val}`
  })
}
getSwiperData()
getMenuData()
getGoodsData()
</script>

<style lang="less" scoped>
swiper {
  height: 400rpx;
  width: 100%;
}

swiper-item {
  height: 400rpx;
  width: 100%;
}

image {
  width: 100%;
  height: 100%;
}

.grid-item-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;

  image {
    margin-top: 20rpx;
    width: 70rpx;
    height: 70rpx;
  }

  text {
    margin-top: 18rpx;
    color: #646566;
    font-size: 28rpx;
    word-break: break-all;
  }
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  box-sizing: border-box;
  width: 100%;
}

.goods-item {
  box-sizing: border-box;
  background-color: #fff;
  padding: 5.33333vw;
  border-radius: 1.33333vw;
  display: flex;
  align-items: center;
  width: 48%;
  flex-direction: column;
  margin-top: 1.33333vw;
}

.goods-item image {
  width: 26.66667vw;
  height: 32vw;
}

.title {
  font-size: 3.73333vw;
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 4vw;
  color: #000;
}

.desc {
  font-size: 3.2vw;
  color: #c3c3c3;
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2.66667vw;
}

.price {
  font-size: 3.2vw;
  margin-top: 2.66667vw;
  color: red;
}

.footer {
  text-align: center;
  height: 100rpx;
  line-height: 100rpx;
  color: gray;
  font-size: 14px;
}
</style>
